// 代理测试脚本
// 这个脚本用于验证webpack-dev-server的代理功能是否正常工作

import axios from 'axios';

// 等待页面加载完成
document.addEventListener('DOMContentLoaded', function() {
  console.log('代理测试脚本加载完成');
  
  // 创建测试按钮
  const testButton = document.createElement('button');
  testButton.textContent = '测试代理功能';
  testButton.style.position = 'fixed';
  testButton.style.top = '20px';
  testButton.style.right = '20px';
  testButton.style.zIndex = '9999';
  document.body.appendChild(testButton);
  
  // 创建结果显示区域
  const resultDiv = document.createElement('div');
  resultDiv.style.position = 'fixed';
  resultDiv.style.top = '60px';
  resultDiv.style.right = '20px';
  resultDiv.style.width = '400px';
  resultDiv.style.maxHeight = '400px';
  resultDiv.style.overflow = 'auto';
  resultDiv.style.background = 'white';
  resultDiv.style.border = '1px solid #ccc';
  resultDiv.style.padding = '10px';
  resultDiv.style.zIndex = '9999';
  document.body.appendChild(resultDiv);
  
  // 添加测试功能
  testButton.addEventListener('click', function() {
    testProxy();
  });
  
  // 代理测试函数
  async function testProxy() {
    resultDiv.innerHTML = '<p>正在测试代理功能...</p>';
    
    try {
      // 测试代理请求 - 使用相对路径，应该被webpack-dev-server代理
      const proxyResponse = await axios.get('/api/v1', {
        timeout: 5000 // 设置5秒超时
      });
      
      resultDiv.innerHTML = `
        <h3>代理测试结果：成功</h3>
        <p>状态码：${proxyResponse.status}</p>
        <p>响应数据：${JSON.stringify(proxyResponse.data).substring(0, 500)}...</p>
        <p><strong>代理配置正常工作！</strong></p>
      `;
      console.log('代理测试成功:', proxyResponse);
      
    } catch (error) {
      resultDiv.innerHTML = `
        <h3>代理测试结果：失败</h3>
        <p>错误信息：${error.message}</p>
        ${error.response ? `<p>状态码：${error.response.status}</p>` : ''}
        <p>请检查：</p>
        <ol>
          <li>目标服务器是否正在运行：http://192.168.1.171:8080</li>
          <li>webpack-dev-server是否启动</li>
          <li>代理配置是否正确</li>
        </ol>
      `;
      console.error('代理测试失败:', error);
    }
  }
});